<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style Class</title>
    <script src="bower_components/vue/dist/vue.min.js"></script>
</head>
<body>

<!--对象语法-->
<div id="demo1">
    <div v-bind:class="{ active: isActive }"></div>

    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
</div>

<script type="text/javascript">
    var demo1 = new Vue({
        el: '#demo1',
        data: {
            isActive: true,
            hasError: false
        }
    });

</script>


<!--对象语法-->
<div id="demo2">
    <div v-bind:class="[activeClass, errorClass]">
    </div>
</div>
<script type="text/javascript">
    var demo2 = new Vue({
        el: '#demo2',
        data: {
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    });

</script>


<!-- 组件用法 -->
<div id="demo3">
    <my-component class="baz boo"></my-component>
</div>

<script type="text/javascript">
    Vue.component('my-component', {
        template: '<p class="foo bar">Hi</p>'
    });

    var demo3 = new Vue({
        el: '#demo3',
        data: {

        }
    });

</script>

<!-- 内联样式 CSS in JS-->
<div id="demo4">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    <div v-bind:style="styleObject"></div>
</div>

<script type="text/javascript">
    var demo4 = new Vue({
        el: '#demo4',
        data: {
            activeColor: 'red',
            fontSize: 30,

            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        }
    });

</script>

</body>
</html>